<template>
  <view class="apply-form-container">
    <!-- 导航栏 -->
    <uni-nav-bar
      title="禧易宝商家入驻申请"
      left-icon="back"
      @click-left="goBack"
      fixed
    />

    <scroll-view class="scroll-content" scroll-y>
      <!-- 步骤指示器 -->
      <view class="steps-indicator">
        <view
          class="step-item"
          :class="{ active: currentStep >= 1, completed: currentStep > 1 }"
        >
          <view class="step-circle">
            <text class="step-num">{{ currentStep > 1 ? "✓" : "1" }}</text>
          </view>
          <text class="step-label">查询创客</text>
        </view>

        <view class="step-line" :class="{ active: currentStep > 1 }"></view>

        <view
          class="step-item"
          :class="{ active: currentStep >= 2, completed: currentStep > 2 }"
        >
          <view class="step-circle">
            <text class="step-num">2</text>
          </view>
          <text class="step-label">填写资料</text>
        </view>
      </view>

      <!-- 表单内容 - 步骤1: 查询创客 -->
      <view v-if="currentStep === 1" class="form-content">
        <!-- 工号输入 -->
        <view class="input-section">
          <view class="input-row">
            <input
              class="input"
              v-model="workNumber"
              placeholder="请输入工号/邀请码/手机号进行查询"
              placeholder-class="placeholder"
            />
            <view
              class="search-btn"
              :class="{ disabled: searchLoading }"
              @click="handleSearch"
            >
              <uni-icons
                v-if="!searchLoading"
                type="search"
                size="16"
                color="#fff"
              />
              <uni-icons
                v-else
                type="loop"
                size="16"
                color="#fff"
                class="loading-icon"
              />
              <text class="btn-text">{{
                searchLoading ? "查询中" : "查询"
              }}</text>
            </view>
          </view>
        </view>

        <!-- 查询结果 -->
        <view v-if="creatorInfo" class="result-section">
          <view class="result-content">
            <view class="result-header">
              <text class="result-name">{{ creatorInfo.name }}</text>
              <text class="result-phone-hidden">{{
                creatorInfo.phoneHidden
              }}</text>
            </view>
            <view class="result-maker-no">工号：{{ creatorInfo.makerNo }}</view>
            <view class="result-invite-code">
              <text class="code-label">邀请码：</text>
              <text class="code-value">{{ creatorInfo.inviteCode }}</text>
            </view>
          </view>
          <view class="result-action">
            <view
              v-if="!isCreatorBound"
              class="add-btn"
              @click="handleBindCreator"
            >
              <uni-icons type="plus" size="20" color="#fff" />
            </view>
            <view v-else class="delete-btn" @click="handleUnbindCreator">
              <uni-icons type="trash" size="20" color="#fff" />
            </view>
          </view>
        </view>

        <!-- 已绑定的创客信息 -->
        <view v-if="isCreatorBound && boundCreatorInfo" class="bound-section">
          <view class="bound-title">已绑定创客</view>
          <view class="bound-card">
            <!-- 删除按钮 -->
            <view class="bound-delete-btn" @click="handleUnbindCreator">
              <uni-icons type="trash" size="18" color="#ff4444" />
            </view>

            <view class="bound-header">
              <text class="bound-name">{{ boundCreatorInfo.name }}</text>
              <text class="bound-phone">{{
                boundCreatorInfo.phoneHidden
              }}</text>
            </view>
            <view class="bound-maker-no"
              >工号：{{ boundCreatorInfo.makerNo }}</view
            >
            <view class="bound-code">
              <text class="bound-code-label">邀请码：</text>
              <text class="bound-code-value">{{
                boundCreatorInfo.inviteCode
              }}</text>
            </view>
          </view>
        </view>

        <!-- 提示信息 -->
        <view class="tips-section">
          <view class="tips-title">
            <text class="star">*</text>
            <text>店铺入驻所需材料如下，请您提前准备</text>
          </view>
          <view class="tips-content">
            <text class="tip-item">
              · 营业执照/法人身份证/法人身份证手持照
            </text>
            <text class="tip-item">
              · 店铺门头照（至少1张）/店铺内景照（至少3张）
            </text>
            <text class="tip-item"> · 特殊行业需要提供相关的资质证明文件 </text>
          </view>
        </view>
      </view>

      <!-- 表单内容 - 步骤2: 填写资料 -->
      <view v-if="currentStep === 2" class="form-content">
        <!-- 基本信息 -->
        <view class="section-title">基本信息</view>

        <view class="form-item required">
          <view class="form-label">门店名称</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.merchantName"
              placeholder="请输入门店名称"
            />
          </view>
        </view>

        <view class="form-item">
          <view class="form-label">分店名称</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.branchName"
              placeholder="请输入分店名称（选填）"
            />
          </view>
        </view>

        <view class="form-item required">
          <view class="form-label">公司名称</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.corporateName"
              placeholder="请输入公司名称"
            />
          </view>
        </view>

        <view class="form-item required">
          <view class="form-label">经营类目</view>
          <view class="form-value" @click="selectCategory">
            <text :class="formData.classifyId ? 'value-text' : 'placeholder'">
              {{ selectedCategoryName || "请选择经营类目" }}
            </text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <!-- 法人信息 -->
        <view class="section-title">法人信息</view>

        <view class="form-item required">
          <view class="form-label">法人姓名</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.userName"
              placeholder="请输入法人姓名"
            />
          </view>
        </view>

        <view class="form-item required">
          <view class="form-label">法人手机号</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.userMobile"
              type="number"
              placeholder="请输入法人手机号"
            />
          </view>
        </view>

        <view class="form-item required">
          <view class="form-label">法人身份证号</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.idCard"
              placeholder="请输入法人身份证号"
            />
          </view>
        </view>

        <!-- 店铺地址 -->
        <view class="section-title">店铺地址</view>

        <view class="form-item required">
          <view class="form-label">所在地区</view>
          <view class="form-value" @click="selectRegion">
            <text :class="regionText ? 'value-text' : 'placeholder'">
              {{ regionText || "请选择省市区" }}
            </text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <view class="form-item required">
          <view class="form-label">详细地址</view>
          <view class="form-value">
            <input
              class="form-input"
              v-model="formData.storeAddress"
              placeholder="请输入详细地址"
            />
          </view>
        </view>

        <view class="form-item">
          <view class="form-label">营业时间</view>
          <view class="form-value" @click="selectBusinessHours">
            <text
              :class="
                formData.storeBusinessHours ? 'value-text' : 'placeholder'
              "
            >
              {{ formData.storeBusinessHours || "请选择营业时间" }}
            </text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>

        <!-- 证照资料 -->
        <view class="section-title">证照资料</view>

        <view class="upload-section">
          <view class="upload-title required-title">营业执照正面</view>
          <view class="upload-tip">仅支持jpg、png格式，单张大小不超过2M</view>
          <UploadMedia
            v-model="formData.businessLicenseFront"
            :limit="1"
            @change="handleUploadChange"
          />
        </view>

        <view class="upload-section">
          <view class="upload-title required-title">身份证正面</view>
          <UploadMedia
            v-model="formData.idCardFront"
            :limit="1"
            @change="handleUploadChange"
          />
        </view>

        <view class="upload-section">
          <view class="upload-title required-title">身份证反面</view>
          <UploadMedia
            v-model="formData.idCardBack"
            :limit="1"
            @change="handleUploadChange"
          />
        </view>

        <view class="upload-section">
          <view class="upload-title required-title">身份证手持照</view>
          <UploadMedia
            v-model="formData.idCardHold"
            :limit="1"
            @change="handleUploadChange"
          />
        </view>

        <!-- 店铺照片 -->
        <view class="section-title">店铺照片</view>

        <view class="upload-section">
          <view class="upload-title required-title">门店大图</view>
          <view class="upload-tip">建议尺寸：750*420px</view>
          <UploadMedia
            v-model="formData.storeLargePicture"
            :limit="1"
            @change="handleUploadChange"
          />
        </view>

        <view class="upload-section">
          <view class="upload-title required-title">门店照片</view>
          <view class="upload-tip">至少上传3张，最多9张</view>
          <UploadMedia
            v-model="formData.storePhotos"
            :limit="9"
            :multiple="true"
            @change="handleUploadChange"
          />
        </view>
      </view>

      <!-- 底部按钮 -->
      <view class="bottom-btn-container">
        <uni-button v-if="currentStep > 1" class="prev-btn" @click="handlePrev">
          上一步
        </uni-button>
        <uni-button
          class="next-btn"
          type="primary"
          @click="handleNext"
          :loading="submitLoading"
        >
          {{ currentStep === 2 ? "提交申请" : "下一步" }}
        </uni-button>
      </view>
    </scroll-view>

    <!-- 地区选择弹窗 -->
    <RegionPicker ref="regionPickerRef" @confirm="handleRegionConfirm" />

    <!-- 经营类目选择弹窗 -->
    <CategoryPicker ref="categoryPickerRef" @confirm="handleCategoryConfirm" />

    <!-- 营业时间选择弹窗 -->
    <BusinessHoursPicker
      ref="businessHoursPickerRef"
      v-model="formData.storeBusinessHours"
      @confirm="handleBusinessHoursConfirm"
    />
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRequest } from "ahooks-vue";
import RegionPicker from "@/components/common/RegionPicker/RegionPicker.vue";
import CategoryPicker from "./components/CategoryPicker.vue";
import BusinessHoursPicker from "./components/BusinessHoursPicker.vue";
import UploadMedia from "@/components/UploadMedia/UploadMedia.vue";
import { applyToBeMerchant, getCreatorInfo } from "@/api/user";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();

// 当前步骤
const currentStep = ref(1);
// 工号
const workNumber = ref("");
// 创客信息
const creatorInfo = ref(null);
// 已绑定的创客信息
const boundCreatorInfo = ref(null);
// 是否已绑定创客
const isCreatorBound = ref(false);
// 地区选择器引用
const regionPickerRef = ref(null);
// 类目选择器引用
const categoryPickerRef = ref(null);
// 营业时间选择器引用
const businessHoursPickerRef = ref(null);
// 选中的类目名称
const selectedCategoryName = ref("");
// 邀请码查询参数
const makerInfo = ref({
  inviteCode: "",
  makerNo: "",
  mobile: "",
});

// 表单数据
const formData = ref({
  applyType: 1, // 申请类型：1.商户
  merchantName: "", // 门店名称
  branchName: "", // 分店名称
  corporateName: "", // 公司名称
  classifyId: null, // 类目分类id
  userName: "", // 法人姓名
  userMobile: "", // 法人手机号
  idCard: "", // 法人身份证号
  province: "", // 省
  provincialCode: "", // 省级编码
  city: "", // 市级名称
  cityCode: "", // 市级编码
  district: "", // 区级名称
  districtCode: "", // 区级编码
  storeAddress: "", // 门店地址
  storeBusinessHours: "", // 营业时间
  businessLicenseFront: [], // 营业执照正面照片（UploadMedia组件使用数组）
  idCardFront: [], // 身份证正面（UploadMedia组件使用数组）
  idCardBack: [], // 身份证反面（UploadMedia组件使用数组）
  idCardHold: [], // 身份证手持照（UploadMedia组件使用数组）
  storeLargePicture: [], // 门店大图（UploadMedia组件使用数组）
  storePhotos: [], // 门店照片（用于存储多张）
  inviteCode: "", // 创客邀请码
});

// 地区文本
const regionText = computed(() => {
  if (!formData.value.province) return "";
  return `${formData.value.province} / ${formData.value.city} / ${formData.value.district}`;
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

const { run: getCreatorInfoRun, loading: searchLoading } = useRequest(
  (params) => getCreatorInfo(params),
  {
    manual: true,
    onSuccess: (response) => {
      console.log("创客信息查询成功：", response);
      // 后端返回格式: { code: 2000, data: {...}, message: '' }
      const data = response.data;
      if (data) {
        // 处理手机号脱敏
        const phone = data.mobile || "";
        const phoneHidden =
          phone.length >= 11
            ? phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
            : phone;

        creatorInfo.value = {
          name: data.nickname || "",
          phone: phone,
          phoneHidden: phoneHidden,
          makerNo: data.makerNo || "",
          inviteCode: data.inviteCode || "",
        };

        uni.showToast({
          title: "查询成功",
          icon: "none",
        });
      } else {
        creatorInfo.value = null;
        uni.showToast({
          title: "未找到该工号对应的创客",
          icon: "none",
        });
      }
    },
    onError: (error) => {
      console.error("查询创客信息失败：", error);
      creatorInfo.value = null;
      uni.showToast({
        title: error.message || "查询失败，请重试",
        icon: "none",
      });
    },
  }
);

// 查询工号/邀请码/手机号
const handleSearch = () => {
  if (!workNumber.value.trim()) {
    uni.showToast({
      title: "请输入工号/邀请码/手机号",
      icon: "none",
    });
    return;
  }

  const searchValue = workNumber.value.trim();

  // 设置查询参数（同时传递三个字段，让后端自己判断）
  makerInfo.value.makerNo = searchValue;
  makerInfo.value.inviteCode = searchValue;
  makerInfo.value.mobile = searchValue;

  getCreatorInfoRun({
    makerNo: searchValue,
    inviteCode: searchValue,
    mobile: searchValue,
  });
};

// 绑定创客
const handleBindCreator = () => {
  if (!creatorInfo.value) return;

  // 绑定邀请码
  formData.value.inviteCode = creatorInfo.value.inviteCode;
  boundCreatorInfo.value = { ...creatorInfo.value };
  isCreatorBound.value = true;

  // 清空查询结果和工号
  creatorInfo.value = null;
  workNumber.value = "";

  uni.showToast({
    title: "绑定成功",
    icon: "none",
  });
};

// 解绑创客
const handleUnbindCreator = () => {
  uni.showModal({
    title: "提示",
    content: "确定要解绑该创客吗？",
    confirmColor: "#ffa726",
    success: (res) => {
      if (res.confirm) {
        formData.value.inviteCode = "";
        boundCreatorInfo.value = null;
        isCreatorBound.value = false;

        uni.showToast({
          title: "已解绑",
          icon: "none",
        });
      }
    },
  });
};

// 选择经营类目
const selectCategory = () => {
  const currentCategory = formData.value.classifyId
    ? {
        id: formData.value.classifyId,
        name: selectedCategoryName.value,
      }
    : null;
  categoryPickerRef.value?.open(currentCategory);
};

// 类目选择确认
const handleCategoryConfirm = (category) => {
  console.log("选择的类目：", category);
  formData.value.classifyId = category.id;
  selectedCategoryName.value = category.name;
};

// 选择营业时间
const selectBusinessHours = () => {
  businessHoursPickerRef.value?.open();
};

// 营业时间选择确认
const handleBusinessHoursConfirm = (businessHours) => {
  console.log("选择的营业时间：", businessHours);
  formData.value.storeBusinessHours = businessHours;
};

// 选择地区
const selectRegion = () => {
  regionPickerRef.value?.open();
};

// 地区选择确认
const handleRegionConfirm = (region) => {
  console.log("选择的地区：", region);
  formData.value.province = region.province;
  formData.value.provincialCode = region.provinceCode;
  formData.value.city = region.city;
  formData.value.cityCode = region.cityCode;
  formData.value.district = region.area;
  formData.value.districtCode = region.areaCode;
};

// 上传图片变化
const handleUploadChange = (files) => {
  console.log("上传的文件：", files);
};

// 下一步
const handleNext = () => {
  if (currentStep.value === 1) {
    // 步骤1验证
    if (!isCreatorBound.value) {
      uni.showToast({
        title: "请先绑定创客",
        icon: "none",
      });
      return;
    }
    currentStep.value = 2;
  } else if (currentStep.value === 2) {
    // 步骤2验证并提交
    handleSubmit();
  }
};

// 上一步
const handlePrev = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// 提交申请
const { loading: submitLoading, run: submitApply } = useRequest(
  (data) => applyToBeMerchant(data),
  {
    manual: true,
    onSuccess: (result) => {
      console.log("提交成功：", result);
      uni.showToast({
        title: result.message || "提交成功",
        icon: "none",
      });
      uni.navigateBack();
    },
    onError: (error) => {
      console.error("提交失败：", error);
      uni.showToast({
        title: error.message || "提交失败",
        icon: "none",
      });
    },
  }
);

// 表单验证
const validateForm = () => {
  const rules = [
    { field: "merchantName", message: "请输入门店名称" },
    { field: "corporateName", message: "请输入公司名称" },
    { field: "classifyId", message: "请选择经营类目" },
    { field: "userName", message: "请输入法人姓名" },
    { field: "userMobile", message: "请输入法人手机号" },
    { field: "idCard", message: "请输入法人身份证号" },
    { field: "province", message: "请选择所在地区" },
    { field: "storeAddress", message: "请输入详细地址" },
  ];

  for (const rule of rules) {
    if (!formData.value[rule.field]) {
      uni.showToast({
        title: rule.message,
        icon: "none",
      });
      return false;
    }
  }

  // 验证图片字段（数组格式）
  const imageRules = [
    { field: "businessLicenseFront", message: "请上传营业执照正面" },
    { field: "idCardFront", message: "请上传身份证正面" },
    { field: "idCardBack", message: "请上传身份证反面" },
    { field: "idCardHold", message: "请上传身份证手持照" },
    { field: "storeLargePicture", message: "请上传门店大图" },
  ];

  for (const rule of imageRules) {
    if (
      !formData.value[rule.field] ||
      formData.value[rule.field].length === 0
    ) {
      uni.showToast({
        title: rule.message,
        icon: "none",
      });
      return false;
    }
  }

  // 验证门店照片至少3张
  if (!formData.value.storePhotos || formData.value.storePhotos.length < 3) {
    uni.showToast({
      title: "请上传至少3张门店照片",
      icon: "none",
    });
    return false;
  }

  return true;
};

// 提交表单
const handleSubmit = () => {
  if (!validateForm()) {
    return;
  }

  // 准备提交数据
  const submitData = {
    applyType: formData.value.applyType,
    merchantName: formData.value.merchantName,
    branchName: formData.value.branchName,
    corporateName: formData.value.corporateName,
    classifyId: formData.value.classifyId,
    userName: formData.value.userName,
    userMobile: formData.value.userMobile,
    idCard: formData.value.idCard,
    province: formData.value.province,
    provincialCode: formData.value.provincialCode,
    city: formData.value.city,
    cityCode: formData.value.cityCode,
    district: formData.value.district,
    districtCode: formData.value.districtCode,
    storeAddress: formData.value.storeAddress,
    storeBusinessHours: formData.value.storeBusinessHours,
    inviteCode: formData.value.inviteCode,
    userId: userStore.userId,
    // 将图片数组转换为字符串 URL
    businessLicenseFront:
      formData.value.businessLicenseFront.length > 0
        ? formData.value.businessLicenseFront[0].url
        : "",
    idCardFront:
      formData.value.idCardFront.length > 0
        ? formData.value.idCardFront[0].url
        : "",
    idCardBack:
      formData.value.idCardBack.length > 0
        ? formData.value.idCardBack[0].url
        : "",
    idCardHold:
      formData.value.idCardHold.length > 0
        ? formData.value.idCardHold[0].url
        : "",
    storeLargePicture:
      formData.value.storeLargePicture.length > 0
        ? formData.value.storeLargePicture[0].url
        : "",
    // 门店照片转换为 storePicture1/2/3
    storePicture1:
      formData.value.storePhotos.length > 0
        ? formData.value.storePhotos[0].url
        : "",
    storePicture2:
      formData.value.storePhotos.length > 1
        ? formData.value.storePhotos[1].url
        : "",
    storePicture3:
      formData.value.storePhotos.length > 2
        ? formData.value.storePhotos[2].url
        : "",
  };

  console.log("提交的数据：", submitData);
  submitApply(submitData);
};
</script>

<style scoped lang="scss">
.apply-form-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: calc(100vh - 88rpx);
}

// 步骤指示器
.steps-indicator {
  background-color: #fff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40rpx;
  margin-bottom: 20rpx;

  .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;

    .step-circle {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;
      transition: all 0.3s;

      .step-num {
        font-size: 24rpx;
        color: #999;
        font-weight: 500;
      }
    }

    .step-label {
      font-size: 24rpx;
      color: #999;
      text-align: center;
      white-space: nowrap;
    }

    &.active {
      .step-circle {
        background-color: #ffa726;

        .step-num {
          color: #fff;
          font-weight: 600;
        }
      }

      .step-label {
        color: #333;
        font-weight: 500;
      }
    }

    &.completed {
      .step-circle {
        background-color: #ffa726;

        .step-num {
          color: #fff;
        }
      }
    }
  }

  .step-line {
    flex: 0 0 80rpx;
    height: 2rpx;
    background-color: #e5e5e5;
    margin-bottom: 30rpx;
    transition: all 0.3s;

    &.active {
      background-color: #ffa726;
    }
  }
}

// 表单内容
.form-content {
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;
  padding-bottom: 160rpx;
}

// 输入部分
.input-section {
  margin-bottom: 32rpx;

  .label-row {
    margin-bottom: 20rpx;

    .label {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .input-row {
    display: flex;
    align-items: center;
    border: 1rpx solid #e5e5e5;
    border-radius: 8rpx;
    overflow: hidden;
    background-color: #f9f9f9;

    .input {
      flex: 1;
      height: 80rpx;
      padding: 0 24rpx;
      font-size: 28rpx;
      color: #333;
    }

    .placeholder {
      color: #999;
    }

    .search-btn {
      width: 140rpx;
      height: 80rpx;
      background-color: #ffa726;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      transition: all 0.3s;

      .btn-text {
        font-size: 28rpx;
        color: #fff;
        font-weight: 500;
      }

      .loading-icon {
        animation: rotate 1s linear infinite;
      }

      &.disabled {
        opacity: 0.6;
        pointer-events: none;
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}

// 查询结果
.result-section {
  display: flex;
  padding: 32rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 40rpx;
  gap: 24rpx;

  .result-content {
    flex: 1;

    .result-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 16rpx;

      .result-name {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
      }

      .result-phone-hidden {
        font-size: 28rpx;
        color: #666;
      }
    }

    .result-maker-no {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 16rpx;
      line-height: 1.5;
    }

    .result-invite-code {
      display: flex;
      align-items: center;
      padding: 16rpx;
      background-color: #fff;
      border-radius: 8rpx;

      .code-label {
        font-size: 28rpx;
        color: #666;
      }

      .code-value {
        font-size: 28rpx;
        color: #ffa726;
        font-weight: 600;
      }
    }
  }

  .result-action {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .add-btn,
    .delete-btn {
      width: 68rpx;
      height: 68rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      &:active {
        opacity: 0.8;
        transform: scale(0.95);
      }
    }

    .add-btn {
      background-color: #ffa726;
      box-shadow: 0 4rpx 12rpx rgba(255, 167, 38, 0.3);
    }

    .delete-btn {
      background-color: #ff4444;
      box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
    }
  }
}

// 已绑定的创客信息
.bound-section {
  margin-bottom: 40rpx;

  .bound-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 20rpx;
    padding-left: 16rpx;
    border-left: 6rpx solid #ffa726;
  }

  .bound-card {
    position: relative;
    padding: 32rpx;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-radius: 12rpx;
    border: 2rpx solid #ffa726;

    .bound-delete-btn {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s;

      &:active {
        opacity: 0.7;
        transform: scale(0.95);
        background-color: #fff;
      }
    }

    .bound-header {
      display: flex;
      align-items: center;
      gap: 16rpx;
      margin-bottom: 16rpx;

      .bound-name {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
      }

      .bound-phone {
        font-size: 28rpx;
        color: #666;
      }
    }

    .bound-maker-no {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 16rpx;
      line-height: 1.5;
    }

    .bound-code {
      display: flex;
      align-items: center;
      padding: 16rpx;
      background-color: #fff;
      border-radius: 8rpx;

      .bound-code-label {
        font-size: 28rpx;
        color: #666;
      }

      .bound-code-value {
        font-size: 32rpx;
        color: #ffa726;
        font-weight: 700;
      }
    }
  }
}

// 提示部分
.tips-section {
  .tips-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20rpx;

    .star {
      color: #ff4444;
      font-size: 28rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 28rpx;
      color: #ff4444;
      font-weight: 500;
      line-height: 1.5;
    }
  }

  .tips-content {
    display: flex;
    flex-direction: column;
    gap: 16rpx;

    .tip-item {
      font-size: 24rpx;
      color: #666;
      line-height: 1.8;
    }
  }
}

// 底部按钮
.bottom-btn-container {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx 40rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  display: flex;
  gap: 24rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);

  .prev-btn,
  .next-btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }
  }

  .prev-btn {
    background-color: #f5f5f5;
    color: #666;
  }

  .next-btn {
    background-color: #ffa726;
    color: #fff;
  }
}

// 表单项
.form-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &.required {
    .form-label::before {
      content: "*";
      color: #ff4444;
      margin-right: 8rpx;
    }
  }

  .form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
  }

  .form-value {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .form-input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      text-align: right;
    }

    .value-text {
      font-size: 28rpx;
      color: #333;
    }

    .placeholder {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  margin: 32rpx 0 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid #ffa726;
}

// 上传区域
.upload-section {
  margin-bottom: 40rpx;

  .upload-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 12rpx;
  }

  .required-title::before {
    content: "*";
    color: #ff4444;
    margin-right: 8rpx;
  }

  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 16rpx;
    line-height: 1.5;
  }
}
</style>
